<!--
 * @Author: 王灿
 * @Date: 2019-11-17 23:51:45
 * @LastEditTime : 2020-01-12 12:46:41
 * @Description: 银行名称
 * @FilePath: \scarlet-sparrow-admin\src\views\configure\DefaultConfig.vue
 -->
 <template>
  <el-table :data="tableData" style="width: 100%" class="config-table__wrapper">
    <el-table-column prop="propertyName" label="配置名称" />
    <el-table-column prop="propertyValue" label="配置值" />
    <el-table-column prop="remark" label="备注">
      <template slot-scope="scope">
        <span>{{ scope.row.remark || '--' }}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" align="center" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="onEdit(scope.row)">详情</el-button>
        <el-button type="text" size="small" @click="onDelete(scope.row.id)" class="active">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

 <script>
import { getByType, getPropertyDelete } from '@/api/configure.js'
export default {
  name: 'CommodityType',
  props: {
    // tab标记
    isBankNameFlag: {
      type: Boolean,
      default: false
    },
    // 搜索标记
    isSearchFlag: {
      type: Boolean,
      default: false
    },
    // 判断是否点击tab切换进入
    searchKey: {
      type: Boolean,
      default: false
    },
    //name 模糊搜索
    name: {
      type: String,
      default: ''
    },
    // 新增/编辑标记
    isRefresh: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  watch: {
    // tab标记
    isBankNameFlag() {
      if (this.isBankNameFlag && this.searchKey) {
        this.onGetByType()
      }
    },
    // name模糊搜索
    name() {
      if (this.isBankNameFlag && this.isSearchFlag && !this.searchKey) {
        this.onGetByType()
      }
    },
    // 新增成功/编辑成功 刷新页面
    isRefresh() {
      if (this.isRefresh && this.isBankNameFlag) {
        this.onGetByType()
      }
    }
  },
  methods: {
    // 配置列表
    onGetByType() {
      getByType({
        type: '11',
        name: this.name
      }).then(res => {
        this.tableData = res.data
      })
    },
    
    // 编辑
    onEdit(row) {
      this.$emit('editTableRow', row)
    },
     // 删除
    onDelete(id) {
      this.$confirm('此操作将删除该类型，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getPropertyDelete({
            id: id
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetByType()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
  }
}
</script>